<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="客户名称:" prop="companyName">
        <el-input v-model="queryParams.companyName" placeholder="请输入公司名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="客户归属:" prop="createBy">
        <el-input v-model="queryParams.createBy" placeholder="请输入客户归属" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="地址省份:" prop="provinceName">
        <el-input v-model="queryParams.provinceName" placeholder="地址省份" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="合同上传:" prop="importFlag">
        <el-select v-model="queryParams.importFlag" placeholder="请选择合同上传状态" clearable @change="handleQuery">
          <el-option label="未上传" value="0"></el-option>
          <el-option label="已上传" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['custom:info:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['custom:info:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['custom:info:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['custom:info:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="签约客户名称" align="center" prop="companyName"  width="150"/>
      <el-table-column label="客服归属" align="center" prop="createBy" />
      <el-table-column label="客户地址" align="center" prop="address" width="200" />
      <el-table-column label="合同总参保人数" align="center" prop="insuredPopulation" width="120px"  />
      <el-table-column label="追溯总合格人数" align="center" prop="qualifiedFollowers" width="120px" />
      <el-table-column label="追溯脱贫符合人数" align="center" prop="outPoverty" width="130px" />
      <el-table-column label="追溯失业符合人数" align="center" prop="unemPloyment" width="130px" />

      <el-table-column label="追溯退役符合人数" align="center" prop="deductionPloyment"  width="130px"/>

      <el-table-column label="脱贫退税部分" align="center" prop="refundPart"  width="100px"/>

      <el-table-column label="脱贫抵税部分" align="center" prop="deductionPart" width="100px" />


      <el-table-column label="退役退税部分" align="center" prop="refundRetiredPart"  width="100px" />
      <el-table-column label="退役抵税部分" align="center" prop="deductionRetiredPart"  width="100px" />

      <el-table-column label="失业退税部分" align="center" prop="refundOutPart"  width="100px" />
      <el-table-column label="失业抵税部分" align="center" prop="deductionOutPart"   width="100px"/>

      <el-table-column label="4050符合人数" align="center" prop="eligiblePersons"  width="110px" />
      <el-table-column label="9月社保 " align="center" prop="septemberSocial"  width="100px" />

      <el-table-column label="合同信息" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!-- 正式环境 prod-api  本地环境 dev-api -->
          <el-upload class="upload" :action="`/prod-api/crmcustomer/info/uploads/${scope.row.customerId}`"
            :headers="{ Authorization: `Bearer ${token}` }" :on-success="handleSuccess" :show-file-list="false"
            v-if="scope.row.importFlag === 0" :on-error="handleError" :before-upload="(file) => beforeUpload(file, 1)"
            :limit="1">
            <el-button size="mini" type="text" icon="el-icon-folder-add">上传合同</el-button>
          </el-upload>

          <el-button size="mini" type="text" icon="el-icon-folder-opened" v-if="scope.row.importFlag === 1"
            @click="selectContract(scope.row.customerId)">查询合同</el-button>
        </template>
      </el-table-column>

      <el-table-column label="上传数据" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div class="upload-container">
            <input type="file" ref="fileInput" multiple @change="handleFileSelect(scope.row.customerId)"
              class="upload-input" />
            <button class="upload-button" @click="uploadFiles(scope.row.customerId)" v-hasPermi="['custom:info:import']">
              <i class="el-icon-document-copy"></i>
              上传
            </button>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="上传状态" align="center">
        <template slot-scope="scope">
          <el-button type="success" size="mini" v-if="scope.row.dataProcessing === 'TOBEIMPROTINGDATA'">待导入</el-button>
          <el-button type="warning" size="mini" icon="el-icon-loading"
            v-if="scope.row.dataProcessing === 'IMPROTINGDATA'">正在导入</el-button>
          <el-tooltip content="意向客户只能导入一次" placement="top">
            <el-button type="info" size="mini" v-if="scope.row.dataProcessing === 'RESTRICTIMPORTDATA'">限制导入</el-button>
          </el-tooltip>

        </template>
      </el-table-column>


      <el-table-column label="提交筛查" align="center" width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-refresh"
            @click="openPars(scope.row.customerId)">提交筛查</el-button>
        </template>
                <template slot-scope="scope">
                  <el-dropdown>
                    <span class="el-dropdown-link">提交筛查<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="pars('all',scope.row.customerId)" v-hasPermi="['custom:info:reptileAll']"><el-button type="text">全部筛查</el-button></el-dropdown-item>

                      <el-dropdown-item @click.native="pars('identity',scope.row.customerId)"  v-hasPermi="['custom:info:reptileIdentity']">
                        <el-button type="text">脱贫筛查</el-button>
                      </el-dropdown-item>

                      <el-dropdown-item @click.native="pars('unemployment',scope.row.customerId)" v-hasPermi="['custom:info:reptileUnemployment']">
                        <el-button type="text" >失业筛查</el-button>
                      </el-dropdown-item>

                      <el-dropdown-item @click.native="pars('retired',scope.row.customerId)" v-hasPermi="['custom:info:reptileRetired']">
                        <el-button type="text">退役筛查</el-button>
                      </el-dropdown-item>

                      <el-dropdown-item @click.native="pars('reptilallchick',scope.row.customerId)" v-hasPermi="['custom:info:realTime']">
                        <el-button type="text">统计报表</el-button>
                      </el-dropdown-item>

                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
      </el-table-column>

      <el-table-column label="筛查状态" align="center">
        <template slot-scope="scope">
          <el-button type="success" size="mini" v-if="scope.row.crawlerStatus === 'NORMAL'">正常</el-button>
          <el-button type="warning" size="mini" icon="el-icon-loading"
            v-if="scope.row.crawlerStatus === 'CRAWLING'">筛查中</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">

          <el-button size="mini" type="text" icon="el-icon-refresh-left" v-hasPermi="['custom:info:exchange']"
            :disabled="scope.row.crawlerStatus === 'CRAWLING'"
            @click="conversion(scope.row.customerId, scope.row.importFlag)">签约</el-button>

          <el-button size="mini" type="text" icon="el-icon-s-order" @click="handleDetail(scope.row)"
            v-hasPermi="['custom:info:detailList']" :disabled="scope.row.crawlerStatus === 'CRAWLING'">明细</el-button>

          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            :disabled="scope.row.crawlerStatus === 'CRAWLING'" v-hasPermi="['custom:info:edit']">修改</el-button>

          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            :disabled="scope.row.crawlerStatus === 'CRAWLING'" v-hasPermi="['custom:info:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"  :page-sizes="[10,20, 50, 100]"
      @pagination="getList" />

    <!-- 添加或修改客户对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="公司地址" prop="codeList">
          <el-cascader ref="cascader" :options="options" :props="{ value: 'weight', label: 'name', children: 'children' }"
            :filterable="true" clearable v-model="form.codeList" show-all-levels></el-cascader>
        </el-form-item>


        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="form.companyName" placeholder="请输入公司地址" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 合同查看框 -->
    <el-dialog title="合同信息" :visible.sync="dialogVisible" width="75%" :before-close="handleClose">
      <template>
        <img :src="blobUrl" style="width: 100%; height: 100%" />
        <pdf :src="blobUrl" style="width: 100%; height: 100%" />
      </template>
    </el-dialog>

    <!-- 明细查看框 -->
    <el-dialog title="明细" :visible.sync="dialogVisibleTo" width="75%" :before-close="handleClose">
      <el-form :model="detailsParams" ref="detailsParams" size="small" :inline="true" v-show="showSearch"
        label-width="68px">
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="detailsParams.userName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQueryByDetail" />
        </el-form-item>
        <el-form-item label="证件号码" prop="userIdentityCardNumber">
          <el-input v-model="detailsParams.userIdentityCardNumber" placeholder="请输入证件号码" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="身份校验" prop="crawlerDataType">
          <el-select v-model="detailsParams.crawlerDataType" placeholder="请选择身份校验状态" clearable @change="handleQueryByDetail">
            <el-option label="成功" value=true></el-option>
            <el-option label="失败" value=false></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="失业校验" prop="identityCheckType">
          <el-select v-model="detailsParams.identityCheckType" placeholder="请选择失业校验状态" clearable @change="handleQueryByDetail">
            <el-option label="成功" value=true></el-option>
            <el-option label="失败" value=false></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="退役校验" prop="retiredCrawlerType">
          <el-select v-model="detailsParams.retiredCrawlerType" placeholder="请选择退役校验状态" clearable @change="handleQueryByDetail">
            <el-option label="成功" value=true></el-option>
            <el-option label="失败" value=false></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryByDetail">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryByDetail">重置</el-button>

          <el-button type="primary" @click="exportSubsidiary('identity')">身份校验</el-button>
          <el-button type="primary" @click="exportSubsidiary('unemployment')">失业校验</el-button>
          <el-button type="primary" @click="exportSubsidiary('retired')">退役校验</el-button>
          <el-button type="primary" @click="exportSubsidiary('eligible')">4050校验</el-button>
          <el-button type="primary" @click="exportSubsidiary('all')">数据汇总</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loadingDetailsList" :data="detailsList" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="center" inline class="demo-table-expand">
              <el-form-item label="单位编号">
                <span>{{ props.row.deptNumber }}</span>
              </el-form-item>
              <el-form-item label="个人编号">
                <span>{{ props.row.userNumber }}</span>
              </el-form-item>
              <el-form-item label="姓名">
                <span>{{ props.row.userName }}</span>
              </el-form-item>
              <el-form-item label="证件号码">
                <span>{{ props.row.userIdentityCardNumber }}</span>
              </el-form-item>
              <el-form-item label="对应费款所属期">
                <span>{{ props.row.feesDate }}</span>
              </el-form-item>
              <el-form-item label="缴费基数">
                <span>{{ props.row.paymentBase }}</span>
              </el-form-item>
              <el-form-item label="个人缴费金额">
                <span>{{ props.row.userPaymentNumber }}</span>
              </el-form-item>
              <el-form-item label="单位缴费金额">
                <span>{{ props.row.deptPaymentNumber }}</span>
              </el-form-item>
              <el-form-item label="缴费类别">
                <span>{{ props.row.paymentType }}</span>
              </el-form-item>
              <el-form-item label="失业证书">
                <span>{{ props.row.identityCheckDocument }}</span>
              </el-form-item>
              <el-form-item label="失业证书发放时间">
                <span>{{ props.row.identityCheckDate }}</span>
              </el-form-item>
              <el-form-item label="身份校验返回数据">
                <span>{{ props.row.crawlerData }}</span>
              </el-form-item>
              <el-form-item label="身份校验返回消息">
                <span>{{ props.row.crawlerMsg }}</span>
              </el-form-item>
              <el-form-item label="失业校验返回信息">
                <span>{{ props.row.identityCheckMsg }}</span>
              </el-form-item>
              <el-form-item label="退役校验返回数据">
                <span>{{ props.row.retiredCrawlerData }}</span>
              </el-form-item>
              <el-form-item label="退役校验时间">
                <span>{{ props.row.retiredCrawlerTime }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="单位编号"
          prop="deptNumber">
        </el-table-column>
        <el-table-column
          label="个人编号"
          prop="userNumber">
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="userName">
        </el-table-column>
        <el-table-column
          label="证件号码"
          prop="userIdentityCardNumber" width="200px">
        </el-table-column>
        <el-table-column
          label="缴费基数"
          prop="paymentBase">
        </el-table-column>
        <el-table-column
          label="个人缴费金额"
          prop="userPaymentNumber">
        </el-table-column>
        <el-table-column
          label="单位缴费金额"
          prop="deptPaymentNumber">
        </el-table-column>
        <el-table-column
          label="缴费类别"
          prop="paymentType">
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDetailDelete(scope.row)"  v-hasPermi="['customer:info:detaildelete']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="detailsTotal > 0" :total="detailsTotal" :page.sync="detailsParams.current"
        :limit.sync="detailsParams.size" @pagination="getDetailsList" />
    </el-dialog>

    <!-- 解析对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisiblePars" width="30%" :before-close="handleClose">
      <el-form size="small" :inline="true" label-width="68px">

        <el-row>
          <el-col :span="6">
            <el-form-item label="">
              <el-button type="primary" @click="pars('all')" v-hasPermi="['custom:info:reptileAll']">全部筛查开始</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="">
              <el-button type="primary" @click="pars('identity')"
                v-hasPermi="['custom:info:reptileIdentity']">脱贫筛查开始</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="">
              <el-button type="primary" @click="pars('unemployment')"
                v-hasPermi="['custom:info:reptileUnemployment']">失业筛查开始</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="">
              <el-button type="primary" @click="pars('retired')"
                v-hasPermi="['custom:info:reptileRetired']">退役筛查开始</el-button>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
    </el-dialog>


    <el-dialog title="统计报表" :visible.sync="dialogVisibleRealTimePars">
        <div>
          <span style="color: red;">注:数据可能稍有偏差,仅供参考。</span>
        </div>
      <el-table :data="realTimeList">
        <el-table-column property="id" label="序号" width="50"></el-table-column>
        <el-table-column property="message" label="信息" width="600"></el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { reptileRetired, listInfo, getInfo, delInfo, addInfo, updateInfo, download, switchingIntentionClient, downloadFile, importData, getCustomerDetails, reptileAll, reptileUnemployment, reptileIdentity, exportList,deleteDetailList,reptilallchick,realTime} from "@/api/custom/info";
import { getAddressTree, getEconomize } from "@/api/common/util"
import store from "@/store";
import pdf from 'vue-pdf'

export default {
  name: "Info",
  components: {
    pdf
  },
  data() {
    return {
      exportParam: {
        customerId: undefined,
        reptileType: undefined
      },

      detailsParams: {
        current: 1,
        size: 10,
        userName: undefined,
        userIdentityCardNumber: undefined,
        crawlerDataType: undefined,
        identityCheckType: undefined,
        retiredCrawlerType: undefined
      },


      subsidiaryCompany: undefined,
      parsParams: {
        customerId: undefined,
        reptileType: undefined
      },
      parsCustomerId: undefined,
      dialogVisiblePars: false,

      detailsList: [],
      loadingDetailsList: true,
      detailsTotal: 0,
      detailsCustomerId: undefined,
      userId: store.getters.userId, //当前用户ID
      userName: store.getters.name, //当前用户名称
      userType: store.getters.userType, //当前用户类型
      token: store.getters.token,
      dialogVisible: false,
      isImage: false,
      dialogVisibleTo: false,
      blobUrl: undefined,
      screeningForDisabl: false,
      isImage: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户表格数据
      infoList: [],
      //统计列表
      realTimeList: [],
      //统计弹窗
      dialogVisibleRealTimePars: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        current: 1,
        size: 10
        // provinceName: null, //省市名
      },
      //地址列表
      options: [],
      // 表单参数
      form: {
        codeList: undefined,
        companyName: undefined,
      },
      address: undefined,
      codeList: undefined,
      // 表单校验
      rules: {
        companyName: [
          { required: true, message: "公司名称不能为空", trigger: "change" }
        ],
        codeList: [
          { type: 'array', required: true, message: "公司地址不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getEconomizeList();
  },
  methods: {
    /** 明细搜索操作 */
    handleQueryByDetail() {
      this.detailsParams.pageNum = 1;
      this.getDetailsList();
    },
    /** 明细重置操作 */
    resetQueryByDetail() {
      this.resetForm("detailsParams");
      this.getDetailsList();
    },

    // 数据清洗
    exportSubsidiary(type) {
      this.exportParam.reptileType = undefined
      this.exportParam.customerId = undefined
      let tatle = '';
      if (type == 'identity') {
        tatle = '身份校验'
      } else if (type == 'unemployment') {
        tatle = '失业校验'
      } else if(type == 'retired'){
        tatle = '退役校验'
      }else if(type =='eligible'){
        tatle = '4050校验'
      }else{
        tatle = '数据汇总'
      }

      this.$confirm('确定要导出' + tatle + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.exportParam.reptileType = type
          this.exportParam.customerId = this.detailsCustomerId
          exportList(this.exportParam).then(response => {
            const blob = new Blob([response], { type: 'application/octet-stream' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            const timestamp = new Date().getTime();
            link.download = this.subsidiaryCompany + `[`+tatle+`].xlsx`;
            link.click();
            URL.revokeObjectURL(link.href);
            this.getDetailsList()
          })
            .catch(error => {
            });
        })
        .catch(() => {
        });
    },


    // 解析对话框
    openPars(customerId) {
      this.dialogVisiblePars = true
      this.parsCustomerId = customerId
    },
    //解析
    pars(reptileType,customerId) {
      this.parsCustomerId = customerId
      if (reptileType == 'all') {
        this.$modal.msgSuccess("开始全部筛查");
        this.dialogVisiblePars = false
        this.parsParams.customerId = this.parsCustomerId
        this.parsParams.reptileType = reptileType
        reptileAll(this.parsParams).then(response => {
          this.getList();
        })
      } else if (reptileType == 'identity') {
        this.$modal.msgSuccess("开始脱贫筛查");
        this.dialogVisiblePars = false
        this.parsParams.customerId = this.parsCustomerId
        this.parsParams.reptileType = reptileType
        reptileIdentity(this.parsParams).then(response => {
          this.getList();
        })
      } else if (reptileType == 'unemployment') {
        this.$modal.msgSuccess("开始失业筛查");
        this.dialogVisiblePars = false
        this.parsParams.customerId = this.parsCustomerId
        this.parsParams.reptileType = reptileType
        reptileUnemployment(this.parsParams).then(response => {
          this.getList();
        })
      }else if(reptileType=='reptilallchick'){
        realTime(this.parsCustomerId).then(response => {
           this.realTimeList=response.data;
           console.log(response)
           this.dialogVisibleRealTimePars=true;
           console.log(this.realTimeList)
        })
      } else {
        this.$modal.msgSuccess("开始退役筛查");
        this.dialogVisiblePars = false
        this.parsParams.customerId = this.parsCustomerId
        this.parsParams.reptileType = reptileType
        reptileRetired(this.parsParams).then(response => {
          this.getList();
        })
      }
    },

    getDetailsList() {
      this.loadingDetailsList = true;
      getCustomerDetails(this.detailsCustomerId, this.detailsParams).then(response => {
        this.detailsList = response.data.records
        this.detailsTotal = response.data.total
        this.loadingDetailsList = false;
      })

    },
    /** 明细按钮操作 */
    handleDetail(row) {
      this.subsidiaryCompany = row.companyName
      this.loadingDetailsList = true;
      this.detailsCustomerId = row.customerId || this.ids
      this.getDetailsList();
      this.dialogVisibleTo = true;
    },
    handleFileSelect(customerId) {
      const fileList = event.target.files;
      this.fileList = Array.from(fileList);
      this.uploadFiles(customerId)
    },
    uploadFiles(customerId) {
      if (this.fileList.length === 0) {
        return;
      }
      importData(customerId, this.fileList)
        .then(() => {
          this.$modal.msgSuccess("上传成功,开始解析...");
          this.getList();
          this.fileList = []; // 清空文件列表
        })
        .catch((error) => {
          this.$message.error('上传失败:' + error.msg);
          // 处理失败逻辑
        });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    /**查询地址树 */
    getEconomizeList() {
      getAddressTree("").then(response => {
        this.options = response.data
      })
    },
    /** 查询客户列表 */
    getList() {
      this.loading = true;
      listInfo(this.queryParams).then(response => {
        this.infoList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        companyName: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      let bool = true;
      const crawlerStatus = selection.map(item => item.crawlerStatus);
      crawlerStatus.forEach(element => {
        if (element === 'CRAWLING') {
          this.$message.error('请勿选中正在解析客户');
          bool = false;
        }
      });

      if (bool) {
        this.ids = selection.map(item => item.
          customerId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      } else {
        this.multiple = true;
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加客户";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const
        customerId = row.
          customerId || this.ids
      getInfo(
        customerId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改客户";
        });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.
            customerId != null) {
            this.openFullScreen()
            updateInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              this.closeFullScreen();
            });
          } else {

            this.openFullScreen()
            addInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              this.closeFullScreen();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const
        customerIds = row.
          customerId || this.ids;
      this.$modal.confirm('是否确认删除客户编号为"' +
        customerIds + '"的数据项？').then(function () {
          return delInfo(
            customerIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
    },
    handleDetailDelete(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除').then(function () {
          return deleteDetailList(
            id);
        }).then(() => {
          this.getDetailsList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      downloadFile(this.queryParams)
        .then(response => {
          const blob = new Blob([response], { type: 'application/octet-stream' });
          const link = document.createElement('a');
          link.href = URL.createObjectURL(blob);
          const timestamp = new Date().getTime();
          link.download = `info_${timestamp}.xlsx`;
          link.click();
          URL.revokeObjectURL(link.href);
        })
        .catch(error => {
          this.$message.error("导出失败:", error);
        });
    },

    /**合同上传 */
    beforeUpload(file, type) {
      return true
    },
    handleSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.$modal.msgSuccess("上传成功");
        this.getList();
      } else {
        this.$message.error('上传失败:' + response.msg);
        this.getList();
      }
    },
    handleError(error, file, fileList) {
      this.$message.error('无法导入');

    },

    /**查看合同 */
    selectContract(customerId) {
      download(customerId).then(response => {
        this.blobUrl = URL.createObjectURL(response);
        this.dialogVisible = true;
      });
    },

    /**转换意向客户 */
    conversion(customerId, importFlag) {
      if (importFlag == 0) {
        this.$message.error('请上传合同信息');
      } else {
        this.openFullScreen()
        switchingIntentionClient(customerId).then(response => {
          if (response.code == 200) {
            this.$modal.msgSuccess("转换成功");
            this.getList();
            this.closeFullScreen()
          } else {
            this.$message.error('上传失败:' + response.msg);
          }
        })
      }
    },
    handleProgress(event, file, fileList) {

    },
    // 打开全屏加载动画
    openFullScreen() {
      this.loadingInstance = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    // 关闭全屏加载动画
    closeFullScreen() {
      if (this.loadingInstance) {
        this.loadingInstance.close();
      }
    }
  }
};
</script>
<style scoped>
.upload-container {
  position: relative;
  display: inline-block;
}

.upload-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: #409EFF;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
.el-icon-arrow-down {
    font-size: 12px;
  }
.demo-table-expand {
    font-size: 0;
  }
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
    padding-left: 10%;
  }
</style>
